<template>
  <div class="container">
    <van-nav-bar title="教练团队" @click-left="onClickLeft" />

    <div class="team" v-for="coach,i in listCoaches" :key="coach.coach_id"
      @click="$router.push(`/team/biography/${coach.coach_id}`)">
      <div class="con">
        <img class="avatar" :src="`http://119.3.190.46/cjsj_img/pic/${coach.headpic}`" alt="">
        <div class="info">
          <p class="name">{{ coach.nickname }}</p>
          <span class="description">{{ project[i].join('/').split('/').slice(0,3).join('       ') }}</span>
        </div>
      </div>
      <van-icon name="arrow" class="right-icon" />
    </div>

  </div>
</template>
  
<script>
import axios from '@/http'

export default {
  data() {
    return {
      listCoaches: [],
      project: []
    }
  },
  mounted() {
    axios.coachApi.listCoaches().then(res => {
      console.log(res);
      this.listCoaches = res.data.data
      let arr =[] 
      res.data.data.forEach((el,i) => {
        arr.push( el.project.split(','))
      });
      console.log(typeof arr,arr);
      // console.log(this.listCoaches);
      this.project=arr
      
    })
  },
  methods: {
    onClickLeft() {
      this.$toast('返回');
    },
  },

}
</script>
  
<style scoped lang="scss">
.team {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  padding-right: 3vw;
}

.container {
  display: flex;
  flex-direction: column;
}


.con {
  display: flex;
  align-items: center;
  padding: 16px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.info {
  margin-left: 16px;
}

.name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 1vh;
}

.description {
  font-size: 12px;
  color: gray;
  align-items: center;
}

.right-icon {
  margin-left: auto;
}
</style>